<template>
	<div class="buy">
	<div class="body">
		<form>
			<div class="content">
			<input type="text" v-model="doctorname" placeholder="请输入医生/药师姓名" />
			<input @click="pickGoods" type="text" v-model="allname" placeholder="请选择取货地址" readonly="">
			<div class="payWay">
				<label class="demo--label">
                <input class="demo--radio" type="radio" id="one" value="1" v-model="radio">
                <span class="demo--radioInput"></span>微信支付
              </label>
              <label class="demo--label">
                <input class="demo--radio" type="radio" id="one" value="2" v-model="radio">
                <span class="demo--radioInput"></span>余额
              </label>
           </div>
          </div>
		</form>
		<baidu :address="address"></baidu>
	</div>
	<div class="footer">
		<div class="deposit">
			<span>押金额：</span><span class="price">￥</span><span class="price">{{price}}</span>
		</div>
		<button type="button" class="closeButton" @click="back">取消</button>
		<button type="button" class="submitButton" @click="submit">确认</button>
	</div>
	<shop v-show="isShopShow" @chooseShop="chooseShop" @close="close"></shop>
</div>
</template>

<script>
import baidu from '@/components/m-baidu/baidu'
import shop from '@/components/m-address/shop'

export default {	
	name: 'lease',
	components:{
	    baidu,
	    shop
	},
	props: {
	},
	data() {
		return {
			doctorname: '',
			isShopShow:false,
		    shopname:'',
		    shopid:'',
		    address:'',
		    allname:'',
		    price:0,
		    radio:'1',
		    productId:''
		}
	},
	mounted() {
		this.getParams()
	},
	methods: {					
		//提交
		submit() {
			if(this.doctorname == '' || this.doctorname == null) {
			  this.$messagebox.alert('医生姓名不能为空！', '', {
               confirmButtonText: '确定',          
               });
               return false;
			}
			if(this.shopid == '' || this.shopid == null) {
			  this.$messagebox.alert('请选择取货门店！', '', {
               confirmButtonText: '确定',          
               });
               return false;
			}
			 this.$http.post(this.$store.state.reqUrl + '/customer/orders/placeOrder',{
                 doctorName: this.doctorname,
                  payWay: this.radio,
                  productId: this.productId,
                  shopId: this.shopid,
              }).then(res => {
              
              	console.log(res)
                // if(res.status == )
              }).catch(res =>{
              	console.log(res)
              })
		},
		//接受子组建参数
		chooseShop (item) {
			this.shopname = item.shopName;
			this.shopid = item.id;
			this.address = item.address;
			this.allname = item.shopName+item.address;
		},
		//显示店铺
		pickGoods () {
			this.isShopShow = true;
		},
		//关闭店铺
		close (parame) {
			this.isShopShow = parame;
		},
		//取消
		back () {
			this.$router.go(-1);
		},
		getParams() {			
			// 取到路由带过来的参数 
			this.price = this.$route.params.price;
			this.productId = this.$route.params.productid;
		},
 	}
}
</script>

<style scoped>  
	.buy{
	 width:100%;
	 font-size: 28px;	
	 background: #FFFFFF;
	} 
	.content{
		padding-left: 20px;
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width:100%;
		height: 1.2rem;
		background: #FFFFFF;
		border-top: 1px solid gainsboro;
		display: flex;
	}
	.payWay{
		height: 1.2rem;
		line-height: 0.9375rem;
	}
	.demo--label {
		margin: 20px 20px 0 0;
		display: inline-block
	}
	.demo--radio {
		display: none
	}
	.demo--radioInput {
		background-color: #fff;
		border: 2px solid rgba(0, 0, 0, 0.15);
		border-radius: 100%;
		display: inline-block;
		height: 36px;
		margin-right: 10px;
		margin-top: -1px;
		vertical-align: middle;
		width: 36px;
		line-height: 1
	}
	.demo--radio:checked+.demo--radioInput:after {
		background-color: #00A1E9;
		border-radius: 100%;
		content: "";
		display: inline-block;
		height: 26px;
		margin-left: 5px;
		margin-top: 5px;
		width: 26px
	}
	.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{
		border-radius:0;
		}
    .deposit{
    	flex: 1;
    	color: grey;
    	margin-top: 0.15625rem;
    }
    .price{
    	color: #FF0000;
    	font-size: 32px;
    }
    .closeButton{
    	width:2.3rem;
    	height: 100%;
    	background: grey;
    	font-size: 28px;
    	color: #FFFFFF;
    	border: 0;
    	font-size: 30px;
    }
    .submitButton{
    	width:2.3rem;
    	height: 100%;
    	font-size: 30px;
    	color: #FFFFFF;
    	background: #FF0000;
    	border: 0;
    }
    input{
    	width:100%;
    	height: 0.9375rem;
    	outline: none;
    	border-bottom: 1px solid gainsboro;
    }
    input:focus{
    	outline: none;
    }
    ::-webkit-input-placeholder {
    color:#999;
    font-size: 28px;
  }
   :-moz-placeholder {
    color:#999;
    font-size: 28px;
  }
   ::-moz-placeholder {
    color:#999;
    font-size: 28px;
  }
   :-ms-input-placeholder {
    color:#999;
    font-size: 28px;
  }
  .chooseName{
  	    width:100%;
    	height: 0.9rem;
    	border-bottom: 1px solid gainsboro; 
    	line-height: 0.9rem;	
    	color:#999;
  }
</style>